<template>
	<view class="content">
		<view class="message-wrap" :style="{height: style.contentViewHeight+'px', marginBottom: style.contentViewMarginBottom}">
			<scroll-view class="msg-list" :style="{height: style.contentViewHeight+'px'}" :scroll-y="true" :show-scrollbar="false" :scroll-with-animation="scrollAnimation" :scroll-top="scrollTop" :scroll-into-view="scrollToView" @scrolltoupper="loadHistory" upper-threshold="0">
				<!-- 加载历史数据waitingUI -->
				<view v-show="isHistoryLoading" class="loading">
					<view class="spinner">
						<view class="rect rect1"></view>
						<view class="rect rect2"></view>
						<view class="rect rect3"></view>
						<view class="rect rect4"></view>
						<view class="rect rect5"></view>
					</view>
				</view>
				
				<view class="row" v-for="(row, index) in msgList" :key="index" :id="'msg' + index">
					<!-- 系统消息 -->
					<block v-if="row.type == 'system'">
						<view class="system">
							<view v-if="row.msg.type == 'text'" class="system-content text">
								{{row.msg.content.text}}
							</view>
						</view>
					</block>
					<!-- 用户消息 -->
					<block v-if="row.type == 'user'">
						<view class="my" v-if="row.msg.userinfo.id == userInfo.id">
							<view class="left">
								<view v-if="row.msg.type == 'text'" class="bubble">
									<rich-text :nodes="row.msg.content.text"></rich-text>
								</view>
								<view v-if="row.msg.type == 'voice'" class="bubble voice" @click="playVoice(row.msg, index)" :class="playMsgid == 'msg' + index ? 'play' : ''">
									<view class="length">{{row.msg.content.length}}</view>
									<view class="icon my-voice"></view>
								</view>
								<view v-if="row.msg.type == 'img'" class="bubble img" @click="showPic(row.msg)">
									<image :src="row.msg.content.url" mode="aspectFill"></image>
								</view>
								<view v-if="row.msg.type == 'gift'" class="bubble gift">
									<text>送你一个{{row.msg.content.giftName}}</text>
									<image :src="row.msg.content.url" mode=""></image>
								</view>
							</view>
							<view class="right">
								<image :src="row.msg.userinfo.avatar" mode="aspectFill"></image>
							</view>
						</view>
						<view class="other" v-if="row.msg.userinfo.id == toInfo.id">
							<view class="left">
								<image :src="row.msg.userinfo.avatar" mode="aspectFill"></image>
							</view>
							<view class="right">
								<view v-if="row.msg.type == 'text'" class="bubble">
									<rich-text :nodes="row.msg.content.text"></rich-text>
								</view>
								<view v-if="row.msg.type == 'voice'" class="bubble voice" @click="playVoice(row.msg, index)" :class="playMsgid == 'msg' + index ? 'play' :''">
									<view class="icon other-voice"></view>
									<view class="length">{{row.msg.content.length}}</view>
								</view>
								<view v-if="row.msg.type == 'img'" class="bubble img" @click="showPic(row.msg)">
									<image :src="row.msg.content.url" mode="aspectFill"></image>
								</view>
								<view v-if="row.msg.type == 'gift'" class="bubble gift">
									<text>送你一个{{row.msg.content.giftName}}</text>
									<image :src="row.msg.content.url" mode=""></image>
								</view>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				style: {
					contentViewHeight: 0,
					contentViewMarginBottom: '0rpx'
				},
				userInfo: {},
				toInfo: {},
				//文字消息
				textMsg: '',
				//消息列表
				isHistoryLoading: false,
				scrollAnimation: true,
				scrollTop: 0,
				scrollToView: '',
				msgList: [],
				msgImgList: [],
				maxCnt: 15, // 一次拉取历史消息数量
				nextReqMessageID: '',
				isCompleted: 0,
			};
		},
		onLoad(options) {
			const systemInfo = uni.getSystemInfoSync();
			this.style.contentViewHeight = systemInfo.windowHeight;
			uni.getStorage({
				key: 'myInfo',
				success: res => {
					this.userInfo = res.data;
				}
			});
			this.toInfo = JSON.parse(options.to);
			uni.setNavigationBarTitle({
				title: this.toInfo.name
			})
			// uni.$on('im-page', data => {
			// 	if (data.type == 'message') {
			// 		if (data.data.from != this.toInfo.id) {
			// 			return false;
			// 		}
			// 		this.$tim.setMessageRead({
			// 			conversationID: this.toInfo.conversationID,
			// 		});
			// 		if (data.data.type == 'TIMTextElem') {
			// 			this.screenMsg({
			// 				type: 'user',
			// 				msg: {
			// 					type: 'text',
			// 					content: {
			// 						text: data.data.payload.text
			// 					},
			// 					userinfo: {
			// 						id: this.toInfo.id,
			// 						name: this.toInfo.name,
			// 						avatar: this.toInfo.avatar
			// 					}
			// 				}
			// 			})
			// 		}
			// 		if (data.data.type == 'TIMCustomElem') {
			// 			this.screenMsg({
			// 				type: 'user',
			// 				msg: {
			// 					type: data.data.payload.data,
			// 					content: JSON.parse(data.data.payload.extension),
			// 					userinfo: {
			// 						id: this.toInfo.id,
			// 						name: this.toInfo.name,
			// 						avatar: this.toInfo.avatar
			// 					}
			// 				}
			// 			})
			// 		}
			// 	}
			// 	if (data.type == 'send') {
			// 		this.$refs['give-gift'].close();
			// 		this.sendMsg(data.data.msg, data.data.type)
			// 	}
			// })
		},
		onReady() {
			uni.hideTabBar();
			this.getMsgList();
		},
		onShow(){
			this.scrollTop = 9999999;
		},
		onUnload() {
			uni.$off('im-page')
		},
		onBackPress(e) {
			
		}, 
		methods:{
			// 获取最近消息
			getMsgList: function () {
				// 打开某个会话时，第一次拉取消息列表
				this.$tim.getMessageList({
					conversationID: this.toInfo.conversationID,
					nextReqMessageID: this.nextReqMessageID,
					count: 15,
				}).then(imResponse => {
					console.log('拉取最近消息', imResponse)
					// return false;
					const messageList = imResponse.data.messageList;
					let tempList = [];
					for (let i = 0; i < messageList.length; i++) {
						let payload = {};
						let content = {};
						let userinfo = {};
						if (messageList[i].flow == 'in') {
							userinfo.id = this.toInfo.id + '';
							userinfo.name = this.toInfo.name;
							userinfo.avatar = this.toInfo.avatar;
						}
						if (messageList[i].flow == 'out') {
							userinfo.id = this.userInfo.id + '';
							userinfo.name = this.userInfo.name;
							userinfo.avatar = this.userInfo.avatar;
						}
						if (messageList[i].type == 'TIMGroupSystemNoticeElem') {
							payload = messageList[i].payload
							switch (payload.operationType){
								case 1:
									let handleMessage = {}
									if (payload.handleMessage == '') {
										handleMessage.name = ''
									} else {
										let handleMessage = JSON.parse(payload.handleMessage)
									}
									content = {
										text: handleMessage.name + '申请加群'
									}
									break;
								case 2:
									content = {
										text: '申请加群(ID:'+ payload.groupProfile.groupID +')被同意'
									}
									break;
								case 3:
									content = {
										text: '申请加群(ID:'+ payload.groupProfile.groupID +')被拒绝'
									}
									break;
								case 4:
									content = {
										text: '被踢出群组(ID:'+ payload.groupProfile.groupID +')'
									}
									break;
								case 5:
									content = {
										text: '群组(ID:'+ payload.groupProfile.groupID +')被解散'
									}
									break;
								case 6:
									content = {
										text: '创建群组(ID:'+ payload.groupProfile.groupID +')'
									}
									break;
								case 7:
									content = {
										text: '邀请加群:' + payload.handleMessage
									}
									break;
								case 8:
									content = {
										text: '退出群组(ID:'+ payload.groupProfile.groupID +')'
									}
									break;
								case 9:
									content = {
										text: '群组(ID:'+ payload.groupProfile.groupID +')设置管理员:' + payload.handleMessage
									}
									break;
								case 10:
									content = {
										text: '群组(ID:'+ payload.groupProfile.groupID +')取消管理员:' + payload.handleMessage
									}
									break;
								default:
									break;
							}
							tempList.push({
								type: 'user',
								msg: {
									type: 'text',
									content: content,
									userinfo: userinfo
								}
							})
						}
					}
					if (this.nextReqMessageID == '') {
						this.msgList = tempList;
					} else {
						for (let j = (tempList.length-1); j >= 0; j--) {
							this.msgList.unshift(tempList[j])
							if (tempList[j].msg.type == 'img') {
								this.msgImgList.unshift(tempList[j].msg.content.url);
							}
						}
					}
					if (this.nextReqMessageID != '' && tempList.length == 0) {
						uni.showToast({
							title: '没有更多历史消息了~',
							position: 'bottom',
							icon: 'none'
						});
					}
					this.nextReqMessageID = imResponse.data.nextReqMessageID;
					this.isCompleted = imResponse.data.isCompleted;
					// 滚动到底部
					this.$nextTick(function() {
						if (!this.isHistoryLoading) {
							this.scrollToView = 'msg' + (this.msgList.length - 1)
						}
						this.$nextTick(function() {
							this.isHistoryLoading = false;
						});
					});
					this.$tim.setMessageRead({ // 将会话下所有未读消息已读上报
						conversationID: this.toInfo.conversationID,
					});
				});
			},
			
			// 触发滑动到顶部(加载历史信息记录)
			loadHistory: function (e) {
				if (this.isHistoryLoading) {
					return ;
				}
				this.isHistoryLoading = true; // 参数作为进入请求标识，防止重复请求
				setTimeout(() => {
					this.getMsgList();
				}, 1000)
			},
			
			// 接受消息(筛选处理)
			screenMsg: function (msg) {
				if (msg.type == 'system') { //系统消息
					switch (msg.msg.type) {
						case 'text':
							this.msgList.push(msg);
							break;
					}
				}else if (msg.type == 'user') { // 用户消息
					switch (msg.msg.type) {
						case 'text':
							this.msgList.push(msg);
							break;
						case 'voice':
							this.msgList.push(msg);
							break;
						case 'img':
							this.msgImgList.push(msg.msg.content.url);
							this.msgList.push(msg);
							break;
						case 'gift':
							this.msgList.push(msg);
							break;
					}
					if (msg.msg.userinfo.id != this.userInfo.id) { // 非自己的消息震动
						uni.vibrateLong();
					}
				}
				this.$nextTick(function() {
					this.scrollToView = 'msg' + (this.msgList.length - 1)
				});
			},
			
		}
	}
</script>
<style lang="scss">
	@font-face {font-family:"HMfont-home";src:url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');}
	@font-face {
		font-family: iconfont;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/font/iconfont.ttf') format('truetype');
	}
	.icon1 {
		font-family: "iconfont" !important;
		font-size: 70rpx;
		color: #ED4574;
		&.gift:before {
			content: "\e65d";
		}
	}
	.icon {
		font-family: "HMfont-home" !important;
		font-size: 56rpx;
		font-style: normal;
		color: #333;
		&.biaoqing:before {
			content: "\e797";
		}
		&.jianpan:before {
			content: "\e7b2";
		}
		&.yuyin:before {
			content: "\e805";
		}
		&.tupian:before {
			content: "\e639";
		}
		&.chehui:before {
			content: "\e904";
		}
		&.luyin:before {
			content: "\e905";
		}
		&.luyin2:before {
			content: "\e677";
		}
		&.other-voice:before {
			content: "\e667";
		}
		&.my-voice:before {
			content: "\e906";
		}
		&.hongbao:before {
			content: "\e626";
		}
		&.tupian2:before {
			content: "\e674";
		}
		&.paizhao:before {
			content: "\e63e";
		}
		&.add:before {
			content: "\e655";
		}
		&.close:before {
			content: "\e607";
		}
		&.to:before {
			content: "\e675";
		}
	}
	page {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-color: #f5f5f5;
	}
	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		position: relative;
	}
	.loading {
		display: flex;
		justify-content: center;
		@keyframes stretchdelay {
			0%, 40%, 100% {
				transform: scaleY(0.6);
			}
			20% {
				transform: scaleY(1.0);
			}
		}
		.spinner {
			margin: 20rpx 0;
			width: 60rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.rect {
				background-color: #f06c7a;
				height: 50rpx;
				width: 6rpx;
				border-radius: 6rpx;
				animation: stretchdelay 1.2s infinite ease-in-out;
				&.rect2 {
				  animation-delay: -1.1s;
				}
				&.rect3 {
				  animation-delay: -1.0s;
				}
				&.rect4 {
				  animation-delay: -0.9s;
				}
				&.rect5 {
				  animation-delay: -0.8s;
				}
			}
		}
	}
	.message-wrap {
		width: 100%;
		flex: 1;
		.msg-list {
			width: 100%;
			height: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			.row {
				& + .row {
					margin-top: 20rpx;
				}
				.system {
					display: flex;
					justify-content: center;
					.system-content {
						padding: 0 30rpx;
						height: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #c9c9c9;
						color: #fff;
						font-size: 24rpx;
						border-radius: 40rpx;
					}
				}
				.my .left, .other .right{
					width: 100%;
					display: flex;
					.bubble {
						max-width: 70%;
						min-height: 50rpx;
						border-radius: 10rpx;
						padding: 15rpx 20rpx;
						display: flex;
						align-items: center;
						font-size: 32rpx;
						word-break: break-word;
						&.img {
							background-color: transparent;
							padding: 0;
							overflow: hidden;
							image {
								width: 350rpx;
								height: 350rpx;
							}
						}
						&.voice {
							.icon {
								font-size: 40rpx;
								display: flex;
								align-items: center;
								&:after {
									content: " ";
									width: 53rpx;
									height: 53rpx;
									border-radius: 100%;
									position: absolute;
									box-sizing: border-box;
								}
							}
							.length{
								font-size: 28rpx;
							}
						}
						&.gift {
							image {
								width: 40rpx;
								height: 40rpx;
							}
						}
					}
				}
				.my .right, .other .left{
					flex-shrink: 0;
					width: 80rpx;
					height: 80rpx;
					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 10rpx;
					}
				}
				.my {
					width: 100%;
					display: flex;
					justify-content: flex-end;
					.left {
						min-height: 80rpx;
						align-items: center;
						justify-content: flex-end;
						.bubble {
							background-color: #f06c7a;
							color: #fff;
							&.voice {
								.icon {
									color: #fff;
								}
								.length {
									margin-right: 20rpx;
								}
							}
							&.play {
								@keyframes voicePlay {
									0% {
										transform: translateX(80%);
									}
									100% {
										transform: translateX(0%);
									}
								}
								.icon:after {
									border-left: solid 10rpx rgba(240,108,122,.5);
									animation: voicePlay 1s linear infinite;
								}
							}
						}
					}
					.right {
						margin-left: 15rpx;
					}
				}
				.other {
					display: flex;
					width: 100%;
					.left {
						margin-right: 15rpx;
					}
					.right {
						flex-wrap: wrap;
						.username {
							display: flex;
							width: 100%;
							height: 45rpx;
							font-size: 24rpx;
							color: #999;
							.name {
								margin-right: 50rpx;
							}
						}
						.bubble {
							background-color: #fff;
							color: #333;
							&.voice {
								.icon {
									color: #333;
								}
								.length {
									margin-left: 20rpx;
								}
							}
							&.play {
								@keyframes otherPlay {
									0% {
										transform: translateX(-80%);
									}
									100% {
										transform: translateX(0%);
									}
								}
								.icon:after {
									border-right: solid 10rpx rgba(255,255,255,.8);
									animation: otherPlay 1s linear infinite;
								}
							}
						}
					}
				}
			}
		}
	}
	.hidden {
		display: none !important;
	}
	.popup-layer {
		width: 100%;
		height: 390rpx;
		padding: 15rpx;
		box-sizing: border-box;
		background-color: #f3f3f3;
		border-top: 1rpx solid #ddd;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9;
		.more-layer {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			.box {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 180rpx;
				height: 180rpx;
				.menu-item {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 160rpx;
					height: 160rpx;
					border-radius: 20rpx;
					background-color: #fff;
					.icon {
						font-size: 70rpx;
						color: #ED4574;
					}
				}
			}
		}
	}
	.input-box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		padding: 0 10rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9;
		.voice, .more, .send {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 100rpx;
		}
		.send {
			width: 140rpx;
			button {
				width: 90rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 10rpx;
				font-size: 20rpx;
			}
		}
		.textbox {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			height: 100rpx;
			.voice-mode {
				width: calc(100% - 2rpx);
				height: 68rpx;
				border-radius: 70rpx;
				border: 1rpx solid #efefef;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				background-color: #f5f5f5;
				color: #555;
				&.recording {
					background-color: #e5e5e5;
				}
			}
			.text-mode {
				display: flex;
				width: calc(100% - 2rpx);
				height: 68rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				background-color: #f5f5f5;
				border: 1rpx solid #efefef;
				border-radius: 70rpx;
				.input {
					width: 100%;
					height: 64rpx;
					line-height: 64rpx;
				}
			}
		}
	}
	.record {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 300rpx;
		height: 300rpx;
		position: fixed;
		top: 55%;
		left: 50%;
		background-color: rgba(0,0,0,.6);
		border-radius: 20rpx;
		margin-left: -150rpx;
		.ing {
			width: 100%;
			height: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			// 模拟录音音效动画
			@keyframes volatility {
				0% {background-position: 0% 130%;}
				20% {background-position: 0% 150%;}
				30% {background-position: 0% 155%;}
				40% {background-position: 0% 150%;}
				50% {background-position: 0% 145%;}
				70% {background-position: 0% 150%;}
				80% {background-position: 0% 155%;}
				90% {background-position: 0% 140%;}
				100% {background-position: 0% 135%;}
			}
			.icon {
				background-image: linear-gradient(to bottom,#f09b37,#fff 50%); 
				background-size: 100% 200%;
				animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
				-webkit-background-clip: text; 
				-webkit-text-fill-color: transparent; 
				font-size: 150rpx;
				color: #f09b37;
			}
		}
		.cancel {
			width: 100%;
			height: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.icon {
				color: #fff;
				font-size: 150rpx;
			}
		}
		.tis {
			width: 100%;
			height: 50rpx;
			display: flex;
			justify-content: center;
			font-size: 28rpx;
			color: #fff;
			&.change {
				color: #f09b37;
			}
		}
	}
</style>
